<template>
  <transition name="fade-scale">
    <div class="absolute bottom-20 left-4 bg-white rounded-xl shadow-lg p-4 z-50 w-[300px] max-h-[240px] overflow-auto">
      <!-- 全部表情一次性渲染 -->
      <div class="grid grid-cols-5 gap-3">
        <button
          v-for="emo in emojis"
          :key="emo"
          @click="$emit('select', emo)"
          class="text-2xl p-2 rounded hover:bg-gray-100 transition focus:outline-none focus:ring-2 focus:ring-blue-300"
          aria-label="emoji"
        >
          {{ emo }}
        </button>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
const emojis = [
  '😀','😃','😄','😁','😆','😅','😂','🤣','😊','😇',
  '🙂','🙃','😉','😌','😍','😘','😗','😙','😚','😋',
  '😜','😝','😛','🤑','🤗','🤭','🤫','🤔','🤐','😐',
  '😶','😏','😒','🙄','😬','🤥','😌','😔','😪','🤤',
  '😴','😷','🤒','🤕','🤢','🤮','🥵','🥶','😵','🥴',
  '🤯','😕','😟','🙁','😮','😯','😲','😳','🥺','😦'
]
</script>

<style scoped>
.fade-scale-enter-active, .fade-scale-leave-active {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.fade-scale-enter-from, .fade-scale-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
.fade-scale-enter-to, .fade-scale-leave-from {
  opacity: 1;
  transform: scale(1);
}
</style>
